<!--created by yuyupeng-->
<!--2023/12/14-->
<!-- 展示主子表关联关系 -->
<template>
  <div>
    <!--表格：表字段-->
    <a-table
      :columns="tbColumn"
      :data="tbData"
      :scroll="{ y: 400 }"
      row-key="id"
      :pagination="false"
    />
  </div>
</template>

<!--新script-->
<script lang="ts" setup>
  import { defineExpose, ref } from 'vue';
  import { TableColumnData } from '@arco-design/web-vue';

  const tbColumn: TableColumnData[] = [
    {
      title: '序号',
      dataIndex: 'index',
      width: 60,
      fixed: 'left',
      render: ({ rowIndex }) => rowIndex + 1,
    },
    {
      title: '主表',
      dataIndex: 'joinTable',
      width: 150,
    },
    {
      title: '主表关联字段',
      dataIndex: 'joinKey',
      width: 150,
    },
    {
      title: '子表',
      dataIndex: 'curTable',
      width: 150,
    },
    {
      title: '子表关联字段',
      dataIndex: 'curKey',
      width: 150,
    },
  ];
  const tbData = ref<any[]>([]);
  /**
   * @description 获取主子表关联表格数据
   */
  const getAssociationTableList = () => {
    return tbData.value;
  };
  const clearFieldList = () => {
    tbData.value = [];
  };
  /**
   * 批量添加表格信息
   * @param tbDataList
   */
  const addTbDataBatch = (tbDataList: any[]) => {
    tbDataList.forEach((item) => {
      item.disabled = true;
    });
    tbData.value = tbData.value.concat(tbDataList);
  };
  defineExpose({ getAssociationTableList, clearFieldList, addTbDataBatch }); // 在<srcipt setup>的写法中，想要子组件中的方法可以被父组件调用，要通过defineExpose将方法暴露出去
</script>

<style lang="less" scoped></style>
